import React, { PureComponent } from "react";
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  Image,
  ImageBackground,
  StyleSheet
} from "react-native";
import { connect } from "react-redux";
import { width } from "../../../utils/AdapterUtil";
import RouterConfig from "../../../configs/RouterConfig";

@connect(({ menu }) => ({ ...menu }))
class Menu extends React.PureComponent {
  render() {
    const { menuCategoryList, selectIndex } = this.props;
    //console.log(selectIndex);
    //console.log(menuCategoryList.length);
    return (
      <View style={styles.container}>
        <Text>command</Text>
        <View style={styles.menuContainer}>
          <FlatList
            style={styles.menuCategoryList}
            data={menuCategoryList}
            contentContainerStyle={{ alignItems: "center" }}
            keyExtractor={(item, index) => {
              return index.toString();
            }}
            renderItem={this.renderCategoryItem}
            ItemSeparatorComponent={() => {
              return <View style={{ height: 1, backgroundColor: "#000000" }} />;
            }}
          />

          <FlatList
            style={styles.productList}
            data={
              menuCategoryList.length > 0
                ? menuCategoryList[selectIndex].data
                : []
            }
            //contentContainerStyle={{ alignItems: "center" }}
            keyExtractor={(item, index) => {
              return index.toString();
            }}
            renderItem={this.renderProductItem}
            numColumns={2}
            ListEmptyComponent={() => {
              return (
                <View>
                  <Text>sold out</Text>
                </View>
              );
            }}
          />
        </View>
        <View style={styles.bottomContainer}>
          <TouchableOpacity style={styles.shopResult}>
            <Text> CART {}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  /**
   * 渲染菜单类型
   */
  renderCategoryItem = ({ item, index }) => {
    return (
      <TouchableOpacity
        style={styles.itemStyle}
        key={"index" + index}
        onPress={() => {
          this.props.dispatch({
            type: "menu/updateState",
            payload: {
              selectIndex: index
            }
          });
        }}
      >
        <Text>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  /**
   * 渲染菜单类型
   */
  renderProductItem = ({ item, index }) => {
    const { navigation } = this.props;
    return (
      <TouchableOpacity
        style={styles.itemProductStyle}
        key={"index" + index}
        onPress={() => {
          navigation.navigate(RouterConfig.ShopCart.name, {
            mine: "mine"
          });
        }}
      >
        <Text>{item.text}</Text>
        <Text>${item.price}</Text>
        <TouchableOpacity style={styles.touchAdd}>
          <Text style={styles.productAdd}>+</Text>
        </TouchableOpacity>
      </TouchableOpacity>
    );
  };
}

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    flex: 1
  },
  menuContainer: {
    display: "flex",
    flexDirection: "row",
    flex: 1
  },
  menuCategoryList: {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "#ff0000",
    paddingHorizontal: 3,
    width: width / 3
  },
  productList: {
    display: "flex",
    width: (width / 3) * 2,
    backgroundColor: "#00ffff"
  },
  itemStyle: {
    display: "flex",
    flexDirection: "column",
    paddingVertical: 3
  },
  itemProductStyle: {
    display: "flex",
    flexDirection: "column",
    paddingVertical: 3,
    width: ((width / 3) * 2) / 2,
    borderWidth: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  touchAdd: {
    padding: 3
  },
  productAdd: {
    fontSize: 22,
    color: "#100000"
  },
  bottomContainer:{
    position: "absolute",
    width:width,
    bottom: 2,
    zIndex: 99,
    padding: 10,
    borderRadius: 3,
    backgroundColor: "#eee",
    flexDirection:'row',
    justifyContent:'flex-end',
  },
  shopResult: {
    
    padding: 10,
    borderRadius: 3,
    backgroundColor: "#0000ff"
  }
});
export default Menu;
